import React, {
    Component,
} from 'react'

import {
    Text, View, Image, TouchableOpacity, Platform, StyleSheet, FlatList
} from 'react-native'
import {connect} from 'react-redux';
import { SearchBar } from 'antd-mobile-rn'
import { SafeAreaView } from 'react-navigation'
import { VideoItem } from '../../components'
import { ActionTypes } from '../../constants'
import { Px } from '../../utils'

class HomePage extends Component {
    constructor(props) {
        super(props);

    }

    componentDidMount() {
        this._fetchVideoList()
        this._fetchLogin()
    }

    render() {
        console.log('videoList', this.props);

        const { works = [] } = this.props.videoList

        return (
            <SafeAreaView
                style={styles.container}
            >
                <SearchBar
                    placeholder="搜索"
                    cancelText="确实"
                />
                <FlatList
                    style={styles.list}
                    data={works}
                    renderItem={this._renderItem.bind(this)}
                    numColumns={2}
                />
            </SafeAreaView>
        )
    }

    _renderItem({ item, index }) {
        return <VideoItem
            userDetailAction={this._navigateToPersonalPage.bind(this,item)}
            playAction={this._navigateToVideoDtail.bind(this, item)}
            thumbsAction={this._addLike.bind(this, item)}
            key={index}
            item={item}
        />
    }

    _fetchVideoList() {
        actionUtil(ActionTypes.API_GET_VIDEO_LIST)
    }

    _navigateToPersonalPage(item) {
        console.log('personal', item);
        this.props.navigation.navigate('PersonalPage', {item:item })
    }

    _navigateToVideoDtail(item) {
        console.log('_navigateToVideoDtail', item)
        this.props.navigation.navigate('VideoDetail', { item: item })
    }

    _addLike(item) {
        console.log('add like?')
        const { isLogin = false } = this.props.user || {}
        if (isLogin) {
            // 点赞
            return;
        }
        this.props.navigation.navigate('Login')
    }

    _fetchLogin() {
        const data = {
            username: 'Yu',
            password: '111111'
        }
        actionUtil(ActionTypes.API_LOGIN, { data })
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    list: {
        flex: 1,
    }
})

export default connect(state => ({
    videoList: state.videoList.videoList,
    user: state.user.user,
    isLogin: state.user.isLogin
}))(HomePage)
